<template>
	<!-- 权限系统-用户管理 -->
	<d2-container class="d-flex flex-column mod-sys__user">
		<template v-if="$hasPermission('authority:user:index')">
			<div class="d-flex h-100 b-s flex-column">
				<el-form style="margin: 12px 0px;" :inline="true" size="small" :model="dataForm" @keyup.enter.native="getTableList()">
					<el-form-item label="角色">
						<el-select clearable v-model="dataForm.role_ids" placeholder="请选择" @focus="nameFocusFn">
							<el-option v-for="(item,index) in roleName" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="关键字">
						<el-input v-model="dataForm.keyword" :data-operate="dataFormOp.username"
							placeholder="请输入" clearable />
					</el-form-item>
					<el-form-item label="状态">
						<el-select clearable v-model="dataForm.status" placeholder="请选择">
							<el-option v-for="(item,index) in status" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search"
							@click="getTableList()">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="success" icon="el-icon-circle-plus-outline" v-show="$hasPermission('authority:user:create')"
							@click="addOrUpdateData()">新增</el-button>
					</el-form-item>
				</el-form>
				<div class="d-flex flex-1">
					<div class="overflow">
						<vxe-grid keep-source border resizable highlight-hover-row size="small" ref="pGrid" :columns="columns" height="auto"
							:loading="tableLoading" :loading-config="{icon: 'vxe-icon-indicator roll', text: '正在拼命加载中...'}"
							:data="dataList"
							:edit-config="{trigger: 'click', mode: 'row', showStatus: true}"></vxe-grid>
					</div>
				</div>
			</div>
			<div class="d-flex" slot="footer">
				<vxe-pager background size="medium" align="right" :border="false"
					:current-page="dataForm.page" :page-size="dataForm.pageSize" :total="total"  :layouts="['PrevPage', 'Number', 'NextPage', 'Sizes', 'FullJump', 'Total']"
					@page-change="handlePageChange">
				</vxe-pager>
			</div>
			<!-- 新增/修改弹窗 -->
			<user-add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateDialog" @refreshDataList="getTableList"></user-add-or-update>
			<!-- 权限弹窗 -->
			<role-tree v-if="roleVisible" :name="curName" ref="roleDialog" @refreshDataList="getTableList"></role-tree>
		</template>
		<template v-else>
			<div class="d-flex a-center j-center h-100 b-s flex-column">
				<img class="d-flex mb-10" :src="permissionBase64" alt="没有访问权限" style="width: 300px;">
				<div class="d-flex">抱歉，您没有访问权限</div>
			</div>
		</template>
	</d2-container>
</template>

<script>
	import mixinViewModule from '@/mixins/view-module'
	import RoleTree from './role-tree'
	import UserAddOrUpdate from './user-add-or-update'
	import store from '@/store/index'
	export default {
		name: 'sys-user',
		mixins: [mixinViewModule],
		components: {
			UserAddOrUpdate,
			RoleTree
		},
		data() {
			return {
				permissionBase64:'',
				tableLoading:false,
				total:0,
				curName:'',
				addOrUpdateVisible:false,
				roleVisible:false,
				status:[{
					value:0,
					label:'禁用',
				},{
					value:1,
					label:'正常',
				}],
				roleName: [],
				department:[{
					value:0,
					label:'无部门归属',
				},{
					value:1,
					label:'投放',
				},
				{
					value:2,
					label:'运营',
				},
				{
					value:3,
					label:'客服',
				},
				{
					value:4,
					label:'美术',
				},
				{
					value:5,
					label:'技术',
				},
				{
					value:6,
					label:'外部',
				},
				{
					value:7,
					label:'投放观察者',
				}],
				dataList: [],
				dataForm: {
					page:1,
					pageSize:10,
					role_ids:'',//角色
					keyword: '',//关键字
					status:'',//状态
					// department:''//所属部门
				},
				dataFormOp: {
					username: 'like'
				},
				columns: [
					{
						title: 'ID',
						width: 100,
						field: 'id',
						sortable: true,
						align: 'center'
					},
					{
						title: '用户名',
						width: 130,
						field: 'username',
						sortable: false,
						align: 'center'
					},
					{
						title: '姓名',
						width: 130,
						field: 'real_name',
						sortable: false,
						align: 'center'
					},
					{
						title: '角色',
						width: 130,
						field: 'role_name',
						sortable: false,
						align: 'center'
					},
					// {
					// 	title: '上级',
					// 	width: 80,
					// 	field: 'leader_name',
					// 	sortable: false,
					// 	align: 'center'
					// },
					{
						title: '状态',
						field: "status_name",
						sortable: false,
						width: 100,
						align: "center",
					},
					{
						title: '手机号',
						width: 130,
						field: 'phone',
						sortable: false,
						align: 'center'
					},
					{
						title: '邮箱',
						field: 'email',
						sortable: false,
						align: 'center',
						width: 180
					},
					{
						title: '排序',
						field: 'sort',
						sortable: true,
						align: 'center',
						width: 100
					},
					{
						title: '添加时间',
						field: 'created_at',
						sortable: true,
						align: 'center',
						width: 150
					},
					{
						title: '更新时间',
						field: 'updated_at',
						sortable: true,
						align: 'center',
						width: 150
					},
					{
						title: '操作',
						field: 'other',
						width: 200,
						sortable: false,
						fixed:'right',
						align: 'center',
						slots: {
							default: ({
								row
							}) => {
								return [
									<el-button size = "mini" round
										icon = "el-icon-edit"
										v-show={this.$hasPermission('authority:user:update')}
										disabled = {
											!!(row.superUser == 1 && row.currenId != 1)
										}
										onClick = {
											() => this.addOrUpdateData(row)
										}
										type = "primary" > 修改 
									</el-button>, 
									<el-button size = "mini" round
									icon = "el-icon-delete"
									v-show={this.$hasPermission('authority:user:delete')}
									type = "danger"
									onClick = {
										() => this.deleteHandleSetter(row)
									} > 删除 </el-button>, 
								]
							}
						}
					}
				]
			}
		},
		created() {
			console.warn('用户管理----页面');
			if(this.$hasPermission('authority:user:index')){
				this.getTableList();
			}
		},
		methods: {
			//角色列表
			async nameFocusFn(){
				const roleRes = await this.$axios.get('/api/common/auth-role',{})
				this.roleName = roleRes;
			},
			async getTableList(){
				this.tableLoading = true;
				const tableRes = await this.$axios.get('/api/authority/user?'+this.$qs.stringify(this.dataForm));
				this.tableLoading = false;
				this.dataList = tableRes.data;
				this.total = tableRes.total;
			},
			async findCurrentId() {
				const user = await store.dispatch('d2admin/db/get', {
					dbName: 'sys',
					path: 'user.info',
					defaultValue: {},
					user: true
				}, {
					root: true
				})
				this.dataForm.superUser = user.superUser
			},
			//新增/修改弹窗
			async addOrUpdateData(row) {
				console.log(row)
				this.addOrUpdateVisible = true;
				if (typeof row == 'object' && row!=null) {
					// this.curName = row.real_name;
					const id = row.id;
					const userRes = await this.$axios.get(`/api/authority/user/update/${id}`,{});
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.userId = id;
						this.$refs.addOrUpdateDialog.update(userRes);
					})
				} else {
					this.$nextTick(() => {
						this.$refs.addOrUpdateDialog.userId = null;
						this.$refs.addOrUpdateDialog.init()
					})
				}
			},
			// 点击权限
			async roleData(row) {
				console.log(row)
				this.roleVisible = true;
				if (row) {
					this.curName = row.real_name;
					this.$nextTick(() => {
						this.$refs.roleDialog.update(row)
					})
				}
				return;
				const user = await store.dispatch('d2admin/db/get', {
					dbName: 'sys',
					path: 'user.info',
					defaultValue: {},
					user: true
				}, {
					root: true
				})
				if (row) {
					this.$nextTick(() => {
						this.$refs.roleDialog.dataForm.userId = row.userId
						this.$refs.roleDialog.dataForm.currenId = row.currenId
						this.$refs.roleDialog.update(row)
					})
				} else {
					this.$nextTick(() => {
						this.$refs.roleDialog.dataForm.currenId = user.id
						this.$refs.roleDialog.init()
					})
				}
			},
			// 删除
			deleteHandleSetter(row) {
				this.$confirm(this.$t('public.prompt.info', {
					handle: this.$t('views.public.delete')
				}), this.$t('public.prompt.title'), {
					confirmButtonText: this.$t('views.public.confirm'),
					cancelButtonText: this.$t('views.public.cancel'),
					type: 'warning'
				}).then(() => {
					this.$axios.delete(`/api/authority/user/delete/${row.id}`,{}
					).then(res => {
						this.$message({
							message: this.$t('views.public.success'),
							type: 'success',
							duration: 500,
							onClose: () => {
								this.getTableList()
							}
						})
					}).catch(() => {})
				}).catch(() => {})
			}
		}
	}
</script>

<style>
</style>